import { PlusOutlined } from '@ant-design/icons';
import { Button,Space, Divider,Radio, message, Input, Drawer,Table} from 'antd';
import React, { useState,useRef,useEffect } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';

//import ProTable from '@ant-design/pro-table';
//import ProDescriptions from '@ant-design/pro-descriptions';
import CreateForm from './components/CreateForm';
import UpdateForm from './components/UpdateForm';
import { queryRule, updateRule, addRule, removeRule } from './service';
import styles from './index.less';
import { connect } from 'umi';

 const MenuManage=props=>{
  const { 
    dispatch,
    menuInfo,
   } = props;
useEffect(() => {
    dispatch({
      type: 'menuManage/fetch',
      payload: {},
    });
})
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    width: '20%',
  },
  {
    title: 'Path',
    dataIndex: 'path',
    key: 'path',
    width: '25%',
  },
  {
    title: 'Descrtption',
    dataIndex: 'descrtption',
    key: 'descrtption',
    width: '35%',
  },
  {
    title: 'Action',
    dataIndex: 'action',
    key: 'action',
    render: () =><span><a>Add</a>&nbsp;&nbsp;<a>Delete</a></span>,
  }
];

    const [size, setSize] = useState(8);
    const [selectionType, setSelectionType] = useState('radio');
    
    const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    
    getCheckboxProps:(record) =>{
  
    },
    onSelect: (record, selected, selectedRows) => {
      message.warning(`菜单主键是${record.key}，名称是:${record.name}`)
      console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      console.log(selected, selectedRows, changeRows);
    },
  };
  return(
    <PageContainer>
    <div className={styles.container}>
      <div id="components-table-demo-expand-children">
          <Space size={size} style={{ marginBottom: 16,float:"right" }}>
            <Button type="primary" onClick={()=>{

            }}>New</Button>
            <Button onClick={()=>{}}>Delete</Button>
          </Space>
        <Table columns={columns} 
        rowKey="key"
        bordered={true}
        rowSelection={{
        type: {selectionType},
          ... rowSelection
        }}
        dataSource={menuInfo.list}/>
      </div>
    </div> 
    </PageContainer>
    );
}
export default connect(({ menuManage}) => ({
  menuInfo:menuManage.menuInfo
}))(MenuManage);
